<template>
  <div class="main_box">
    <p>我的账号</p>
    <ul>
      <li
        @click="choseHandel"
        v-for="items of tags"
        :key="items.id"
        ref="li">
        {{items.text}}
      </li>
    </ul>
    <user-intro v-if="intro" />
    <user-img v-if="img" />
    <user-log v-if="log" :logs="logs" />
  </div>
</template>

<script>
import UserIntro from './components/userintro'
import UserImg from './components/img'
import UserLog from './components/log'
import { userLog } from 'com/shuju'
export default {
  name: 'IndexMain',
  components: {
    UserIntro,
    UserImg,
    UserLog
  },
  data () {
    return {
      tags: [
        {id: '01', text: '基本资料'},
        {id: '02', text: '我的头像'},
        {id: '03', text: '登录日志'}
      ],
      intro: true,
      img: false,
      log: false,
      logs: null
    }
  },
  methods: {
    choseHandel () {
      for (let i = 0; i < this.$refs.li.length; i++) {
        this.$refs.li[i].style.color = 'rgb(0,0,0)'
        this.$refs.li[i].style.backgroundColor = 'rgb(255,255,255)'
        if (event.target === this.$refs.li[i]) {
          this.$refs.li[i].style.color = 'rgb(255,255,255)'
          this.$refs.li[i].style.backgroundColor = 'rgb(15,183,213)'
        }
      }
      if (event.target.innerText === '基本资料') {
        this.intro = true
        this.img = false
        this.log = false
      } else if (event.target.innerText === '我的头像') {
        this.intro = false
        this.img = true
        this.log = false
      } else if (event.target.innerText === '登录日志') {
        this.intro = false
        this.img = false
        this.log = true
      }
    }
  },
  mounted () {
    var data = new FormData()
    data.set('username', this.$route.query.name)
    userLog(data, this)
  }
}
</script>

<style lang="stylus" scoped>
  .main_box{
    position: relative
    margin-left: 220px
    width: 900px
    height: auto
    background: rgb(255,255,255)
    p{
      font-size: .45rem
      margin: 0
      cursor: default
      border-bottom: 1px solid rgb(230,230,230)
      padding: .2rem
    }
    ul{
      padding: 0
      margin: 0
      width: 100%
      list-style: none
      display: flex
      border-bottom: 1px solid rgb(230,230,230)
      flex-direction: row
      li{
        cursor: pointer
        padding: .3rem
        transition: all .3s
      }
      li:first-child{
        color: rgb(255,255,255)
        background-color: rgb(15,183,213)
      }
    }
  }
</style>
